<template>
     <div id="apply">
        <van-nav-bar title="发起退款" left-arrow fixed safe-area-inset-top @click-left="onClickLeft"></van-nav-bar>

        <div class="content">
            <div class="content-bg">
                <van-checkbox-group v-model="result_check" checked-color="#49CA6F" @change="checkChange">
                    <van-checkbox :name="item.id" v-for="(item,index) in good_list" :key="index" :disabled="(item.good_num - item.refund_num) == 0">
                        <div class="delivery-item" >
                            <img class="item-img" :src="item.good_pics"  />
                            <div class="item-right">
                                <div class="item-flex">
                                    <div class="item-des">{{ item.good_name }}</div>
                                </div>
                                <div class="item-circle">{{ item.good_unit }}</div>
                                <div class="item-txt">数量：<span class="txt-num">x{{ item.good_num - item.refund_num }}</span></div>
                                <div class="item-txt txt-nomar">单价：<span class="txt-icon">¥</span>{{ item.base_price_arr.z_price }}<span class="txt-small">.{{ item.base_price_arr.x_price }}</span></div>
                                <div class="item-step" v-show="result_check.includes(item.id)" @click.stop="()=> {}">
                                    <van-stepper v-model="item.refundNums" theme="round" button-size="22" disable-input min="1" :max="item.good_num" @change="stepChange" />
                                </div>
                            </div>
                        </div>
                    </van-checkbox>
                </van-checkbox-group>
            </div>
        </div>

        <div class="price">
			<div>
				<van-checkbox-group v-model="allValue">
					<van-checkbox @click="allChange" :disabled="good_list.length == 0 || add_id.length == 0" :name="1" icon-size="20px" checked-color="#49CA6F"><span class="price-name">全选</span></van-checkbox>
				</van-checkbox-group>
			</div>
			<div class="price-right">
				<div class="price-title">合计：</div>
				<div>
					<span class="price-icon">¥</span>
					<span class="price-number">{{ result_price.z_price }}</span>
					<span class="price-small">.{{ result_price.x_price }}</span>
				</div>
				<button class="price-btn" @click="settlement()">确认退款</button>
			</div>
		</div>

        <popup-choose ref="popupChoose" txt="请仔细核对退款商品数量及退款金额确认无误后，点击确认即可完成退款" @right="onRight" />

    </div>
</template>
<script>
import popupChoose from '@/components/popupChoose.vue';
import { orderInfo, quitOrder } from "@/api/cloud";
import Decimal from "decimal.js"
export default {
    components: {
        popupChoose
    },
    data() {
        return {
            order_id: '',
            result_check: [],
            allValue: [],
            add_id: [],
            result_price: {
                z_price: 0,
                x_price: '00',
            },
            info: {},
            good_list: [],
            refund_arr: []
        }
    },
    mounted() {
        console.log(this.$route)
        this.order_id = this.$route.query.id;
        this.orderInfo();
    },
    methods: {
        async orderInfo() {
			const res = await orderInfo({
				id: this.order_id
			})
			if (res.status == 1) {
                this.add_id = [];
                res.data.good_list.map((item)=>{
                    item.refundNums = item.refund_num;
                    if ((item.good_num - item.refund_num) != 0) {
                        this.add_id.push(item.id);
                    }
                })
				this.good_list = res.data.good_list;
			}
		},
        onClickLeft() {
            this.$router.back();
        },
        allChange() {
            // console.log(val)
            if (this.allValue.length == 1) {
                this.result_check = this.add_id;
            } else {
                this.result_check = [];
            }
        },
        settlement() {
            if (this.result_check.length == 0) {
                this.$toast("请选择要退款的商品");
                return false;
            }
            this.$refs.popupChoose.show();
        },
        // 回调确认退款
        async onRight() {
            console.log('确认')
            console.log(this.refund_arr)
            const res = await quitOrder(
                {
                    order_id: this.order_id,
                    good_info: this.refund_arr
                }
            )
            if (res.status == 1) {
                this.$toast("已发起退款");
                this.$router.back();
            }
        },
        // 步进器变化
        stepChange(val) {
            console.log(val)
            this.calculatePrice()
        },
        checkChange(val) {
            console.log('checkChange')
            if (val.length == this.good_list.length) {
                this.allValue = [1]
            } else {
                this.allValue = []
            }
            this.calculatePrice()
        },
        // 计算退款的金额
        calculatePrice() {
            let arr = [];
            // console.log(this.good_list)
            // console.log(this.result_check)
            
            this.good_list.forEach((item) => {
                this.result_check.forEach((itemC)=>{
                    if (item.id == itemC) {
                        arr.push(item)
                    }
                })
            })

            let all_price = 0;
            let refund_arr = [];
            arr.forEach((item)=>{
                console.log(item)
                let price_nums = Decimal(item.good_base_price).mul(Decimal(item.refundNums))
				all_price = Decimal(all_price).add(Decimal(price_nums))
                refund_arr.push([item.id, item.refundNums])
            })
            this.refund_arr = refund_arr;

            console.log('总价：' + all_price)
            // 比如： 总价215.9
            let str_arr = String(all_price).split('.');
            // 整数位
            if (str_arr.length == 1) {
                this.result_price = {
                    z_price: str_arr[0],
                    x_price: '00',
                }
            } else if (str_arr.length == 2) {
                this.result_price = {
                    z_price: str_arr[0],
                    x_price: (str_arr[1] < 10 && str_arr[1].length < 2)? str_arr[1]+'0' : str_arr[1],
                }
            }
        }

    },
}
</script>
<style lang="less" scoped>
#apply {
  width: 100vw;
  min-height: 100vh;
  padding-top: calc(92px);
  padding-bottom: 198px;
  background: #FAFAFA;
    ::v-deep .van-nav-bar .van-icon {
        color: #323233;
    }
    ::v-deep .van-nav-bar{
        background: #FAFAFA;
    }
    ::v-deep .van-hairline--bottom::after {
        border: none;
    }
}
.content{
    padding: 32px 24px 0;
    .content-bg{
        background: #FFFFFF;
        border-radius: 16px;
        padding: 38px 30px 40px 32px;
    }
}

.delivery-item{
    display: flex;
    padding-left: 26px;
    padding-right: 22px;
    padding-bottom: 20px;
    margin-bottom: 22px;
    border-bottom: 2px solid #F5F5F6;
    .item-img{
        flex-shrink: 0;
        display: block;
        width: 220px;
        height: 220px;
        border-radius: 8px;
        margin-right: 24px;
    }
    .item-right{
        flex: 1;
        flex-shrink: 0;
    }
    .item-flex{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }
    .item-des{
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        flex-shrink: 0;
        width: 282px;
        min-height: 80px;
        font-size: 28px;
        line-height: 40px;
        color: #333333;
        font-weight: 400;
    }
    .item-price{
        font-size: 40px;
        line-height: 40px;
        color: #141414;
        font-weight: bold;
        .price-icon{
            font-size: 24px;
        }
        .price-small{
            font-size: 28px;
        }
    }
    .item-circle{
        width: fit-content;
        padding: 0px 6px;
        margin-right: 6px;
        margin-bottom: 14px;
        font-size: 20px;
        line-height: 24px;
        color: #FFFFFF;
        background: #49CA6F;
        border-radius: 4px;
    }
    .item-txt{
        font-size: 24px;
        line-height: 34px;
        font-weight: 400;
        color: #798391;
        margin-bottom: 14px;
    }
    .txt-icon{
        font-size: 20px;
    }
    .txt-small{
        font-size: 20px;
    }
    .txt-num{
        color: #FF4D4F;
    }
    .txt-nomar{
        margin-bottom: 34px;
    }
    .item-step{
        display: flex;
        justify-content: flex-end;
        ::v-deep .van-stepper--round .van-stepper__minus{
            color: #000000;
            border-color: #49CA6F;
        }
        ::v-deep .van-stepper__plus{
            background-color: #49CA6F;
        }
    }
}

.price{
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 99;
	padding-bottom: calc(120px + constant(safe-area-inset-bottom)); /* 兼容 iOS<11.2 */
    padding-bottom: calc(120px + env(safe-area-inset-bottom)); /* 兼容iOS>= 11.2 */
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 98px;
	padding: 0 24px;
	background: #FFFFFF;
    .price-name{
        font-size: 22px;
        color: #999999;
        font-weight: 400;
    }
	.price-right{
		display: flex;
		align-items: center;
		.price-title{
			flex-shrink: 0;
			font-size: 24px;
			line-height: 24px;
			color: #333333;
			font-weight: bold;
		}
		.price-icon{
			flex-shrink: 0;
			font-size: 24px;
			line-height: 40px;
			font-weight: bold;
			color: #FF4D4F;
		}
		.price-number{
			flex-shrink: 0;
			font-size: 40px;
			line-height: 40px;
			font-weight: bold;
			color: #FF4D4F;
		}
		.price-small{
			flex-shrink: 0;
			font-size: 20px;
			line-height: 40px;
			font-weight: bold;
			color: #FF4D4F;
		}
		.price-btn{
			flex-shrink: 0;
			display: block;
			width: 216px;
			height: 72px;
			background: #49CA6F;
			border-radius: 39px;
			font-size: 32px;
			line-height: 72px;
			color: #FFFFFF;
			font-weight: 500;
			border:none;
			margin-left: 14px;
		}
		.price-btn::after{
			border:none;
		}
	}
}
</style>